<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="live-record-player" src="http://192.168.1.231:18443/artemis-record/1728549771480.mp4" crossorigin="anonymous" controls></video>
<button id="scr">截图</button>
</body>
<script>
    const player = document.getElementById('live-record-player')
    const btn = document.getElementById('scr')

    const captureImage = function (video, scale) {
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
            .drawImage(video, 0, 0, canvas.width, canvas.height);
        // return canvas.toDataURL('image/png');
        return canvas
    };

    const screenshot = (video, name) => {
        const canvas = captureImage(video, 1);
        let a = document.createElement('a');
        a.setAttribute('crossOrigin', 'anonymous');
        a.href = canvas.toDataURL('image/jpeg');
        a.download = `${name}-${Date.now()}.png`;
        a.click()
    }

    btn.addEventListener('click', () => {
        screenshot(player, Date.now())
    }, false)
</script>
</html>